<template>
	<view class="container">
		<u-picker :show="show" :columns="columns" :title="title" @cancel="show = false" @confirm="confirm"
			@change="changeHandler"></u-picker>
		<u-datetime-picker :minDate="newData" :show="dateTimeShow" mode="datetime" :title="title"
			@cancel="dateTimeShow =false" @confirm="checkDateTime"></u-datetime-picker>
		<view>
			<u--form labelPosition="left" :model="from" :rules="rules" ref="form1" labelWidth='120px'
				:labelStyle='labelStyle'>
				<view class="title">
					基础信息
				</view>
				<view class="box">
					<u-form-item label="作业票名称" prop="zypmc" borderBottom>
						<u--input v-model="from.zypmc" placeholder="作业票名称" border="none"></u--input>
					</u-form-item>
					<u-form-item label="作业申请单位" prop="zysqdw" borderBottom
						@click="show=true;showType = 1,title='作业申请单位'">
						<u--input v-model="from.zysqdw" placeholder="选择作业申请时间" border="none" disabled
							disabledColor="#ffffff"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="作业申请时间" prop="time" borderBottom
						@click="dateTimeShow =true,dateTiemType=1,title='作业申请时间'">
						<u--input v-model="from.time" placeholder="选择作业申请时间" border="none" disabled
							disabledColor="#ffffff"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="作业实施时间" prop="time2" borderBottom
						@click="dateTimeShow =true,dateTiemType=2,title='作业实施时间'">
						<u--input v-model="from.time2" placeholder="选择作业实施时间" border="none" disabled
							disabledColor="#ffffff"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
          <user-pick
              :label="'监护人'"
              :multiple="false"
              :title="'监护人'"
              :placeholder="'请选择监护人'"
              v-model="from.jhr"
              :prop="'jhr'"
          ></user-pick>

					<u-form-item label="作业类别" prop="zylb" borderBottom @click="show=true;showType = 3,title='作业类别'">
						<u--input v-model="from.zylb" placeholder="输入作业类别" border="none" disabled
							disabledColor="#ffffff"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
          <user-pick
              :label="'作业人'"
              :multiple="false"
              :title="'作业人'"
              :placeholder="'请选择作业人'"
              v-model="from.zyr"
              :prop="'zyr'"
          ></user-pick>
					<u-form-item label="作业单位" prop="zydw" borderBottom @click="show=true;showType = 5,title='作业单位'">
						<u--input v-model="from.zydw" placeholder="选择作业单位" border="none" disabled
							disabledColor="#ffffff"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
          <user-pick
              :label="'作业负责人'"
              :multiple="false"
              :title="'作业负责人'"
              :placeholder="'请选择作业负责人'"
              v-model="from.zyfzr"
              :prop="'zyfzr'"
          ></user-pick>
					<u-form-item label="介质名称" prop="jzmc" borderBottom>
						<u--input v-model="from.jzmc" placeholder="输入受限空间内原有介质名称" border="none"></u--input>
					</u-form-item>

				</view>
				<view class="title">
					管道参数
				</view>
				<view class="box">
					<u-form-item label="介质" prop="gdjz" borderBottom>
						<u--input v-model="from.gdjz" placeholder="输入介质" border="none"></u--input>
					</u-form-item>
					<u-form-item label="温度" prop="gdwd" borderBottom>
						<u--input v-model="from.gdwd" placeholder="输入温度" border="none"></u--input>
					</u-form-item>
					<u-form-item label="压力" prop="gdyl" borderBottom>
						<u--input v-model="from.gdyl" placeholder="输入压力" border="none"></u--input>
					</u-form-item>
				</view>
				<view class="title">
					盲板参数
				</view>
				<view class="box">
					<u-form-item label="材质" prop="mbcz" borderBottom>
						<u--input v-model="from.mbcz" placeholder="输入材质" border="none"></u--input>
					</u-form-item>
					<u-form-item label="规格" prop="mbgg" borderBottom>
						<u--input v-model="from.mbgg" placeholder="输入规格" border="none"></u--input>
					</u-form-item>
					<u-form-item label="编号" prop="mbbh" borderBottom>
						<u--input v-model="from.mbbh" placeholder="输入编号" border="none"></u--input>
					</u-form-item>
				</view>
				<view class="title">
					装拆盲板
				</view>
				<view class="box">
					<u-form-item label="装盲板时间" prop="fixData" borderBottom
						@click="dateTimeShow =true,dateTiemType=3,title='装盲板时间'">
						<u--input v-model="from.fixData" placeholder="选择装盲板时间" border="none" disabled
							disabledColor="#ffffff"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
          <user-pick
              :label="'装盲板负责人'"
              :multiple="false"
              :title="'装盲板负责人'"
              :placeholder="'请选择装盲板负责人'"
              v-model="from.zmbfzr"
              :prop="'zmbfzr'"
          ></user-pick>
					<u-form-item label="拆盲板时间" prop="unloadData" borderBottom
						@click="dateTimeShow =true,dateTiemType=4,title='拆盲板时间'">
						<u--input v-model="from.unloadData" placeholder="选择拆盲板时间" border="none" disabled
							disabledColor="#ffffff"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
          <user-pick
              :label="'拆盲板负责人'"
              :multiple="false"
              :title="'拆盲板负责人'"
              :placeholder="'请选择拆盲板负责人'"
              v-model="from.cmbfzr"
              :prop="'cmbfzr'"
          ></user-pick>
				</view>
				<view class="title">
					盲板位置图
				</view>
				<view class="box">
					<u-form-item label="盲板位置图" prop="fileList1" borderBottom>
						<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
							:maxCount="4"></u-upload>
					</u-form-item>
          <user-pick
              :label="'编制人'"
              :multiple="false"
              :title="'编制人'"
              :placeholder="'请选择编制人'"
              v-model="from.bzr"
              :prop="'ysr'"
          ></user-pick>
				</view>
				<view class="title">
					关联特殊作业
				</view>
				<view class="box">
					<u-form-item label="关联特殊作业" prop="gltszy" @click="associateSpecialJobs">
						<u--input v-model="from.gltszy" placeholder="选择关联特殊作业" border="none" disabled
							disabledColor="#ffffff"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
				</view>

				<view class="title">
					危害辨识-安全措施
				</view>
        <view class="box" style="padding-bottom: 6px">
          <u-form-item label="危害辨识" prop="text" borderBottom @click="toHazardousFactors">
            <u--input v-model="from.text" placeholder="选择危害因素" border="none" disabled
                      disabledColor="#ffffff"></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <view
              style="background:#f6f6f6;margin-bottom: 30px;border-radius:8px;height: 200px;overflow-y: auto">
            <u-checkbox-group v-model="from.harm" placement="column" :labelSize='32'>
              <u-checkbox activeColor="#53c21d" v-for="(item,index) in from.  harm" :label="item.label"
                          :name="item.value" shape="circle" :key="index" style="padding: 10px 20px" :checked=true>
              </u-checkbox>
            </u-checkbox-group>
          </view>
          <u-form-item label="安全措施" prop="text" borderBottom @click="toSafetyMeasures">
            <u--input v-model="from.text" placeholder="选择安全措施" border="none" disabled
                      disabledColor="#ffffff"></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <view
              style="background:#f6f6f6;margin-bottom: 30px;border-radius:8px;height: 200px;overflow-y: auto">
            <u-checkbox-group v-model="from.safetyMeasures" placement="column" :labelSize='32'>
              <u-checkbox activeColor="#53c21d" v-for="(item,index) in from.safetyMeasures"
                          :label="item.label" :name="item.value" shape="circle" :key="index"
                          style="padding: 10px 20px" :checked=true>
              </u-checkbox>
            </u-checkbox-group>
          </view>
          <u-form-item label="个人用品防护" prop="text" borderBottom @click="toProtection">
            <u--input v-model="from.text" placeholder="选择个人用品防护" border="none"></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <view
              style="background:#f6f6f6;margin-bottom: 30px;border-radius:8px;height: 200px;overflow-y: auto">
            <u-checkbox-group v-model="from.personalProtection" placement="column" :labelSize='32'>
              <u-checkbox activeColor="#53c21d" v-for="(item,index) in from.personalProtection"
                          :label="item.label" :name="item.value" shape="circle" :key="index"
                          style="padding: 10px 20px" :checked=true>
              </u-checkbox>
            </u-checkbox-group>
          </view>
        </view>
				<view class="title">
					安全交底
				</view>
				<view class="box">
          <user-pick
              :label="'安全交底人'"
              :multiple="false"
              :title="'安全交底人'"
              :placeholder="'请选择安全交底人'"
              v-model="from.aqjdr"
              :prop="'aqjdr'"
          ></user-pick>
          <user-pick
              :label="'接受交底人'"
              :multiple="false"
              :title="'接受交底人'"
              :placeholder="'请选择接受交底人'"
              v-model="from.jsjdr"
              :prop="'jsjdr'"
          ></user-pick>

				</view>
				<view class="title">
					安全教育
				</view>
				<view class="box">

					<u-form-item label="计划性" prop="jhxs" borderBottom @click="showType=13,show=true,title='计划性'">
						<u--input v-model="from.jhxs" placeholder="选择安计划性" border="none" disabled
							disabledColor="#ffffff"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
				</view>
				<view class="title">
					审核人/审核部门
				</view>
				<view class="box">
          <user-pick
              :label="'作业审核人'"
              :multiple="false"
              :title="'作业审核人'"
              :placeholder="'请选择作业审核人'"
              v-model="from.zyshr"
              :prop="'zyshr'"
          ></user-pick>
          <user-pick
              :label="'所在单位意见'"
              :multiple="false"
              :title="'所在单位审批人'"
              :placeholder="'请选择作业审批人'"
              v-model="from.szdwyj"
              :prop="'szdwyj'"
          ></user-pick>
				</view>
				<view class="title">
					验收
				</view>
				<view class="box">
          <user-pick
              :label="'验收人'"
              :multiple="false"
              :title="'验收人'"
              :placeholder="'请选择验收人'"
              v-model="from.ysr"
              :prop="'ysr'"
          ></user-pick>
				</view>
			</u--form>
			<u-button type="primary" text="申请" @click="submit" class='but'></u-button>
		</view>
	</view>
</template>

<script>
	import {
		getDepartmentAPI,
		aboutWorkAPI,
		blindRaffleAPI
	} from "../../../api/api"
	import {
		URL
	} from '../../../api/request.js'
  import userPick from "@/pages/Components/userPick";
	export default {
    components: {
      userPick,
    },
    onShow() {
      let pages = getCurrentPages();
      let currPage = pages[pages.length - 1];
      let brand = currPage.brand
      if (!!brand) {
        if (brand.option) {
          this.from.harm = brand.option
          this.from.whbs = brand.optionList.toString()
        } else if (brand.list) {
          this.from.safetyMeasures = brand.list
          this.from.aqcs = brand.idList.toString()
        } else if (brand.fh) {
          this.from.personalProtection = brand.fh
          this.from.grypfh = brand.fhlist.toString()
        }
      }
    },
		watch: {
			showType(val) {
				if (val === 1 || val === 5 || val === 15) {
					getDepartmentAPI({}).then((r) => {
						let msg = r.data.map((e) => {
							return e.deptName
						})
						this.columns = [msg]
					})
				} else if (val === 3) {
					this.columns = [
						['赌盲板', '抽盲板']
					]
				} else if (val === 13) {
					this.columns = [
						['非计划性', '计划性']
					]
				}
			}
		},
		data() {
			return {
				showType: 0,
				show: false,
				columns: [],
				columnData: [],
				title: '',
				dateTiemType: 0,
				dateTimeShow: false,
				fileList1: [],
				showSex: false,
				newData: new Date().getTime(),
				labelStyle: {
					color: '#666'
				},
				from: {
					text: '',
					url: '',
					zypmc: '',
					zysqsj: '',
					zysqdw: '',
					time2: '',
					jhr: '',
					zylb: "",
					zyr: '',
					jzmc: '',
					gdjz: '',
					gdwd: '',
					gdyl: '',
					mbbh: '',
					mbcz: '',
					mbgg: '',
					fixData: '',
					zmbsj: '',
					zmbfzr: '',
					unloadData: '',
					cmbsj: '',
					cmbfzr: '',
					bzr: '',
					gltszy: '',
					jhxs: '',
					jhx: '',
					zyfzr: '',
					ysr: "",
					whbs: '',
					aqcs: '',
					grypfh: '',
          harm:[],
          safetyMeasures:[],
          personalProtection:[],
          zyshr:''
				},
				rules: {
					// 'text': {
					// 	type: 'string',
					// 	required: true,
					// 	message: '请填写姓名',
					// 	trigger: ['blur', 'change']
					// },
				},
			};
		},
		methods: {
			toProtection() {
				uni.navigateTo({
					url: '../components/protection/protection'
				})
			},
			toHazardousFactors() {
				uni.navigateTo({
					url: '../components/hazardousFactors/hazardousFactors'
				})
			},
			toSafetyMeasures() {
				uni.navigateTo({
					url: '../components/safetyMeasures/safetyMeasures'
				})
			},
			associateSpecialJobs() {
				this.showType = 10
				this.show = true
				this.title = '关联特殊作业'
				aboutWorkAPI({
					pageSize: 10000,
					pageNum: 1
				}).then((r) => {
					let msg = r.data.list.map((e) => {
						return e.zypmc
					})
					this.columns = [msg]
				})
			},
			confirm(e) {
				switch (this.showType) {
					case 1:
						this.from.zysqdw = e.value[0]
						break;
					case 2:
						this.from.jhr = e.value[1]
						break;
					case 3:
						this.from.zylb = e.value[0]
						break;
					case 4:
						this.from.zyr = e.value[1]
						break;
					case 5:
						this.from.zydw = e.value[0]
						break;
					case 6:
						this.from.zyfzr = e.value[1]
						break;
					case 7:
						this.from.zmbfzr = e.value[1]
						break;
					case 8:
						this.from.cmbfzr = e.value[1]
						break;
					case 9:
						this.from.bzr = e.value[1]
						break;
					case 10:
						this.from.gltszy = e.value[0]
						break;
					case 11:
						this.from.aqjdr = e.value[1]
						break;
					case 12:
						this.from.jsjdr = e.value[1]
						break;
					case 13:
						this.from.jhxs = e.value[0]
						this.from.jhx = e.indexs[0]
						break;
					case 14:
						this.from.zyfzr = e.value[1]
						break;
					case 15:
						this.from.szdwyj = e.value[0]
						break;
					case 16:
						this.from.ysr = e.value[1]
						break;
				}
				this.show = false
			},
			checkDateTime(e) {
				const timeFormat = uni.$u.timeFormat
				switch (this.dateTiemType) {
					case 1:
						this.from.time = timeFormat(e.value, 'yyyy-mm-dd hh:MM')
						this.from.zysqsj = timeFormat(e.value, 'yyyymmddhhMM')
						break;
					case 2:
						this.from.time2 = timeFormat(e.value, 'yyyy-mm-dd hh:MM')
						this.from.zysssj = timeFormat(e.value, 'yyyymmddhhMM')
						break;
					case 3:
						this.from.fixData = timeFormat(e.value, 'yyyy-mm-dd hh:MM')
						this.from.zmbsj = timeFormat(e.value, 'yyyymmddhhMM')
						break;
					case 4:
						this.from.unloadData = timeFormat(e.value, 'yyyy-mm-dd hh:MM')
						this.from.cmbsj = timeFormat(e.value, 'yyyymmddhhMM')
						break;

				}
				this.dateTimeShow = false
			},
			changeHandler(e) {
				if (this.showType === 2 || this.showType === 4 || this.showType === 6 || this.showType === 7 || this
					.showType === 8 || this.showType === 9 || this.showType === 11 || this.showType === 12 || this
					.showType === 14 || this.showType === 16) {
					const {
						columnIndex,
						value,
						values,
						index,
						picker = this.$refs.uPicker
					} = e
					if (columnIndex === 0) {
						picker.setColumnValues(1, this.columnData[index])
					}
				}
			},
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			//新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '上传成功',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: URL + '/common/upload',
						filePath: url,
						name: 'file',
						header: {
							'Authorization': `Bearer ${uni.getStorageSync('token')}`
						},
						formData: {
							user: 'file'
						},
						success: (res) => {
							this.from.url = JSON.parse(res.data).url
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
			submit() {
				blindRaffleAPI({
					...this.from
				}).then((r) => {
					if (r.code === 200) {
						this.$refs.uToast.show({
							type: 'default',
							message: "新增盲板作业票成功",
							url: '/pages/componentsB/tag/tag',
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/jump.png'

						})
					} else {
							this.$refs.uToast.show({
							type: 'error',
							message: "请检查表单信息",
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 0 24rpx;
		background-color: #f6f6f6;

		.title {
			font-size: 28rpx;
			font-weight: 500;
			color: #999999;
			line-height: 44rpx;
			padding: 20rpx 48rpx;
		}

		.box {
			padding: 0rpx 48rpx;
			background-color: #fff;
			border-radius: 20rpx;
		}
	}

	.but {
		margin: 30rpx 0;
	}
</style>
